{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}} - {{video.channelName}}</title>
<meta name="twitter:card" content="player" />
<meta property="og:site_name" content="{{sysSettings.siteName}}" />
<meta property="og:title" content="{{video.channelName}}" />
<meta property="og:type" content="video.other" />
<meta property="og:url" content="{{request.url|normalize_url}}" />
<meta property="og:image" content="{{request.url_root|normalize_urlroot}}/videos/{{video.thumbnailLocation}}" />
<meta property="og:description" content="{{video.description}}" />
<meta property="og:video" content="{{request.url_root|normalize_urlroot}}{{streamURL}}" />
<meta property="og:video:type" content="video/mp4" />
<link href="/static/vendor/videojs/css/video-js.css" rel="stylesheet">
<script type="text/javascript" src="/static/vendor/socketio/js/socket.io.js"></script>

{% endblock %}

{% block body %}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8 col-xs-12 col-sm-12">
      <div class="row m-2">
        <div class="index-video-title"><b>{{video.channelName}}</b>

          <span class="float-right mx-1">
            {% if current_user.is_authenticated %}
            <button id="chanSubStateButton" class="btn btn-sm {% if subState == True %} btn-success {% else %} btn-outline-success {% endif %}" onclick='toggleChannelSub("{{video.channel.id}}")'>{% if subState == True %}<i class="fas fa-star"></i><span class="d-none d-sm-none d-md-inline"> Unsubscribe</span>{% else %}<i class="far fa-star"></i><span class="d-none d-sm-none d-md-inline"> Subscribe</span>{% endif %}</button>
            {% else %}
            <button class="btn btn-sm btn-outline-secondary disabled" disabled><i class="far fa-star"></i><span class="d-none d-sm-none d-md-inline"> Subscribe</span></button>
            {% endif %}
            {% if video.published == False %}
            <span class="badge badge-warning">
              <i class="fas fa-video-slash"></i> Unpublished
            </span>
            {% endif %}
          </span>
          {% if video.channel.protected and sysSettings.protectionEnabled %}
          <span class="float-right">
            <span class="badge badge-warning">
              <i class="fas fa-user-lock"></i><span class="d-none d-sm-none d-md-inline"> Protected</span>
            </span>
          </span>
          {% endif %}
        </div>
      </div>
      <div class="player ml-2">
        <video id="video" class="shadow recordedStream video-js vjs-big-play-centered" poster="/videos/{{video.thumbnailLocation}}" autoplay controls preload="auto" data-setup='{"fluid": true}'>
          <source src="{{streamURL}}" type="video/mp4">
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
          </p>
        </video>
      </div>
      <div class="row m-2">
        <div class="video-buttons-row">
          <span class="float-md-left">
            <a href="{{streamURL}}" class="btn btn-primary shadow" download>
              <i class="fas fa-download"></i>
            </a>
            <button type="button" class="btn btn-primary shadow" data-toggle="modal" data-target="#commentModal" {% if video.allowComments == False or sysSettings.allowComments == False %} disabled aria-disabled="true" {% endif %}>
              <i class="fas fa-comment"></i>
            </button>
            <button type="button" class="btn btn-primary shadow" data-toggle="modal" data-target="#shareModal">
              <i class="fas fa-share-alt"></i>
            </button>
            {% if video.owningUser == current_user.id %}
            <button type="button" class="btn btn-primary shadow" onclick="newScreenShot();">
              <i class="fas fa-camera"></i>
            </button>
            <button type="button" class="btn btn-primary shadow" data-toggle="modal" data-target="#moveModal">
              <i class="fas fa-arrow-circle-right"></i>
            </button>
            <button type="button" class="btn btn-primary shadow" data-toggle="modal" onclick="openClipModal()">
              <i class="fas fa-cut"></i>
            </button>
            <button type="button" class="btn btn-primary shadow" data-toggle="modal" data-target="#editModal">
              <i class="fas fa-edit"></i>
            </button>
            <button type="button" class="btn btn-danger shadow" data-toggle="modal" data-target="#deleteModal">
              <i class="fas fa-trash-alt"></i>
            </button>
            {% endif %}
          </span>
          <span class="d-none d-md-inline float-right">
            <i class="fas fa-users mr-2"></i> {{video.views}}
            <button id="upvoteButton" type="button" class="btn btn-outline-success shadow ml-3" onclick="changeUpvote('video',{{video.id}});" title="Upvote" {% if current_user.is_authenticated==false %} disabled aria-disabled="true" {% endif %}>
              <i id="upVoteIcon" class="far fa-thumbs-up"> <span id="totalUpvotes"></span></i>
            </button>
          </span>
        </div>
        <div class="video-buttons-mobile d-block d-sm-block d-md-none mt-2">
          <i class="fas fa-users mr-2"></i> {{video.views}}
          <button id="upvoteButtonMobile" type="button" class="btn btn-outline-success shadow ml-3" onclick="changeUpvote('video',{{video.id}});" title="Upvote" {% if current_user.is_authenticated==false %} disabled aria-disabled="true" {% endif %}>
            <i id="upVoteIconMobile" class="far fa-thumbs-up"> <span id="totalUpvotesMobile"></span></i>
          </button>
        </div>
      </div>
      <div class="row m-2">
        <div class="col-12 nopadding">
          <div><b><i class="fas fa-tv"></i> <a href="/channel/{{video.channel.id}}/">{{video.channel.channelName}}</a></b></div>
          <div><b><i class="fas fa-hashtag"></i> <a href="/topic/{{video.topic}}/">{{video.topic|get_topicName}}</a></b></div>
          <div><b><i class="fas fa-calendar-alt"></i> {{video.videoDate|normalize_date}}</b></div>
        </div>
      </div>

      <div class="row m-2">
        <div class="videodescription">{% if video.description != None %}<p>{{video.description|markdown}}</p> {% else %}No Description Available {% endif %}</div>
      </div>
      {% if video.comments != [] and sysSettings.allowComments == True and video.allowComments == True %}
      <div class="row m-2">
        <div class="index-video-title mb-2"><b>Comments</b></div>
        {% for comment in video.comments %}
        <div class="comment mb-2">
          <div class="row">
            <div class="col-auto mr-auto">
              <a href="/streamers/{{comment.userID}}/"><b>{{comment.userID|get_userName}}</b><br>
              <img src="{{comment.userID|get_pictureLocation}}" width="64px" height="64px" onerror="this.src='/static/img/user2.png';"></a>
            </div>
            <div class="col">
              <i class="fas fa-calendar-alt mr-2"></i> {{comment.timestamp|normalize_date}}<br>
              <p>{{comment.comment|markdown}}</p>
            </div>
            <div class="col-lg-2 col-md-2">
              <div class="float-md-right float-left">
                {% if check_isCommentUpvoted(comment.id) %}<button id="commentUpvoteButton-{{comment.id}}" type="button" class="btn btn-success" onclick="changeUpvote('comment',{{comment.id}});"> <i id="commentUpvoteIcon-{{comment.id}}"
                    class="fas fa-thumbs-up"></i>
                  {% else %} <button type="button" id="commentUpvoteButton-{{comment.id}}" type="button" class="btn btn-outline-success" onclick="changeUpvote('comment',{{comment.id}});"> <i id="commentUpvoteIcon-{{comment.id}}"
                      class="far fa-thumbs-up"></i>
                    {% endif %}
                    <span id="upvoteTotalComments-{{comment.id}}">{{comment.upvotes|length}}</span></button>
                  {% if video.owningUser == current_user.id or user.has_role('Admin') or comment.userID == current_user.id %}
                  <a href="/play/{{video.id}}/comment?action=delete&commentID={{comment.id}}" class="btn btn-danger shadow"><i class="fas fa-trash-alt"></i></a>
                  {% endif %}
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    <div class="col-lg-4 col-sm-12 col-xs-12">
      <div class="row m-2">
        <div class="index-video-title mb-2 mx-2"><b>Other Videos</b></div>
          <ul class="itemList list d-flex flex-wrap justify-content-start">
            {% for vid in randomRecorded[:4] %}
            <li class="displayCard mx-4 my-3">
                <a href="/play/{{vid.id}}">
                  <div class="displayCard-thumbnail zoom">
                    <div class="video-badges">
                      {% if vid.channel.protected and sysSettings.protectionEnabled %}<span class="badge badge-warning mx-2"><i class="fas fa-user-lock"></i> Protected</span>{% endif %}
                    </div>
                    <img class="shadow lazy" src="/static/img/video-placeholder.jpg" data-src="/videos/{{vid.thumbnailLocation}}" onerror="this.src='/static/img/video-placeholder.jpg';">
                    <div class="displayCard-counts">
                      <span class="displayCard-left align-left" style="color:white;">
                        <span class="px-2 flex-fill upvotes"><i class="fas fa-thumbs-up"></i> <b>{{vid.id|get_Video_Upvotes}}</b></span>
                      </span>
                      <span class="displayCard-right" style="float:right;color:white;">
                        <span class="px-2 flex-fill views"><i class="fas fa-users"></i> <b>{{vid.views}}</b></span>
                        <span class="px-2 flex-fill length"><i class="fas fa-clock"></i> <b>{{vid.length|hms_format}}</b></span>
                      </span>
                    </div>
                  </div>
                  <div class="card-data">
                    <img class="rounded" src="/images/{{vid.channel.owner.pictureLocation}}" onerror="this.src='/static/img/user2.png';">
                    <div class="metadata">
                      <div class="card-cut-text name ml-2"><b>{{vid.channelName|limit_title}}</b></div>
                      <div class="card-cut-text topic ml-2">{{vid.topic|get_topicName}}</div>
                      <span class="date" style="display:none;">{{vid.videoDate|normalize_date}}</span>
                    </div>
                  </div>
                </a>
            </li>
            {% endfor %}
          </ul>
      </div>
    </div>
  </div>
</div>

{% if video.owningUser == current_user.id %}
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalTitle">Edit Video Info</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/play/{{video.id}}/change" method="post">
        <div class="modal-body">

          <h5>Name of the Video:</h5>
          <input type="text" class="form-control" value="{{video.channelName}}" name="newVidName" required>
          <br>
          <h5>Stream Topic:</h5>
          <select class="form-control" name="newVidTopic" id="channeltopic" required>
            {% for topic in topics %}
            <option value={{topic.id}} {% if video.topic==topic.id %} selected {% endif %}>{{topic.name}}</option>
            {% endfor %}
          </select>
          <br>
          <div class="form-group">
            <label for="description" class="col-form-label"><b>Description</b></label>
            <textarea class="form-control" name="description" id="description" value="" maxlength="2048">{{video.description}}</textarea>
          </div>
          <div class="form-group row">
            <div class="col-8">
              <label for="allowComments" class="col-form-label"><b>Allow Comments on This Video</b></label>
            </div>
            <div class="col-4">
              <input type="checkbox" data-toggle="toggle" id="allowComments" name="allowComments" {% if video.allowComments == True %} checked {% endif %}>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-primary" value="Save Changes">
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalTitle">Confirm Video Deletion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <h5>Are you sure you want to delete this video?</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <a href="/play/{{video.id}}/delete" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="newSSModal" tabindex="-1" role="dialog" aria-labelledby="newSSModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newSSModalTitle">Confirm New Video Thumbnail</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <h5>Use this picture?</h5>
        <img id="newScreenShotImg" src="">
        <input type="hidden" id="thumbnailTimestamp">
      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <button type="button" onclick="setScreenShot()" class="btn btn-success" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="moveModal" tabindex="-1" role="dialog" aria-labelledby="moveModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form action="/play/{{video.id}}/move" method="post">
        <div class="modal-header">
          <h5 class="modal-title" id="moveModalTitle">Move to Another Channel</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <h5>Move this Video to Channel:</h5>

          <select name="moveToChannelID" class="form-control">
            {% for chan in current_user.channels %}
            {% if chan.id != video.channelID %}
            <option value="{{chan.id}}">{{chan.channelName}}</option>
            {% endif %}
            {% endfor %}
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-warning">Move</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="clipModal" tabindex="-1" role="dialog" aria-labelledby="clipModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <form action="/play/{{video.id}}/clip" method="post">
        <div class="modal-header">
          <h5 class="modal-title" id="clipModalTitle">Create a Video Clip</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="player w-100">
            <video id="videoClip" class="shadow video-js vjs-big-play-centered" poster="/videos/{{video.thumbnailLocation}}" controls preload="auto" data-setup='{"fluid": true}'>
              <source src="{{streamURL}}" type="video/mp4">
              <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
              </p>
            </video>
          </div>
          <br>
          <div id="clipTimeSelect">
            <div class="row">
              <div class="col-12 col-md-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <button class="btn btn-primary" type="button" id="clipStartTimeButton" onclick="setClipStart()">A</button>
                  </div>
                  <input type="number" id="clipStartTime" name="clipStartTime" class="form-control" placeholder="Start Time" readonly required>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <button class="btn btn-danger" type="button" id="clipStopTimeButton" onclick="setClipStop()">B</button>
                  </div>
                  <input type="number" id="clipStopTime" name="clipStopTime" class="form-control" placeholder="Stop Time" readonly required>
                </div>
              </div>
            </div>
            <br>
            <input id="clipName" name="clipName" class="form-control" placeholder="Clip Name" maxlength="255" required><br>
            <textarea id="clipDescription" name="clipDescription" class="form-control" placeholder="Description of the Clip" maxlength="2048"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endif %}

<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="shareModalTitle">Share a Video/Stream</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div style="margin: 0 auto;width: 99%; text-align: center;">
          <button type="button" id="FBShareBtn" class="btn shadow" style="background-color:#4267B2;color:white;"
            onclick="window.open('https://www.facebook.com/sharer/sharer.php?u={{request.url|normalize_url}}','facebook-share-dialog','width=626,height=436');return false;">Share on Facebook</button>
          <button type="button" id="TwitterShareBtn" class="btn shadow" style="background-color:#1dcaff;color:white;"
            onclick="window.open('https://twitter.com/share?url={{request.url|normalize_url}}&text=Check out this Video! - {{video.channelName}}','twitter-share-dialog','width=626,height=436');return false;">Share on Twitter</button>
        </div>
        <br>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="shareTimestamp" value="shareTimestamp" onclick="toggleShareTimestamp();">
          <label class="form-check-label" for="shareTimestamp">Set URL to Start at Current Timestamp</label>
        </div>
        <div class="form-group row">
          <label for="embedURLInput" class="col-sm-2 col-form-label"><b>Embed</b></label>
          <div class="col-sm-10">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                  <button type="button" class="btn btn-primary" onclick="CopyDiv('embedURLInput')"><i class="fas fa-copy"></i></button>
              </div>
              <input class="form-control" id="embedURLInput" type="text" value="<iframe src='{{request.url|normalize_url}}?embedded=True&autoplay=True' width=600 height=345></iframe>" readonly onClick="this.select();">
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label for="linkShareInput" class="col-sm-2 col-form-label"><b>Link</b></label>
          <div class="col-sm-10">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                  <button type="button" class="btn btn-primary" onclick="CopyDiv('linkShareInput')"><i class="fas fa-copy"></i></button>
              </div>
              <input class="form-control" id="linkShareInput" type="text" value="{{request.url|normalize_url}}" readonly onClick="this.select();">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="document.getElementById('shareTimestamp').checked = false;">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="commentModalTitle">Add A Comment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      {% if user.is_authenticated == True %}
      <form action="/play/{{video.id}}/comment" method="post">
        <div class="modal-body">
          <div class="form-group">
            <label for="commentText">Comment</label>
            <textarea class="form-control" id="commentText" name="commentText" rows="3" maxlength="2048"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-primary" value="Submit">
        </div>
      </form>
      {% else %}
      <div class="modal-body">
        You must be logged in to post a comment. <br><br>
        <a href="/login" class="btn btn-primary">Login</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/static/vendor/videojs/js/video.js"></script>

<script>
  var player = videojs('video', { autoplay: true });
</script>

<script type="text/javascript" charset="utf-8">
  var conn_options = {
    'sync disconnect on unload': true
  };

  var socket = io();
</script>

<script>
    var easymde = new EasyMDE({ element: document.getElementById("commentText") });
    var easymde2 = new EasyMDE({ element: document.getElementById("description") });
    {% if video.owningUser == current_user.id %}
    var easymde3 = new EasyMDE({ element: document.getElementById("clipDescription") });
    {% endif %}
</script>

<script>
  socket.on('connect', function () {
    socket.emit('getUpvoteTotal', { loc: '{{video.id}}', vidType: 'video' });
  });
</script>

<script>
  setInterval(function () {
    socket.emit('getUpvoteTotal', { loc: '{{video.id}}', vidType: 'video' });
  }, 30000);
</script>

<script type="text/javascript" charset="utf-8">
  socket.on('upvoteTotalResponse', function (msg) {

    if (msg['type'] === 'video') {
      upvoteDivID = 'totalUpvotes';
      upvoteIconID = 'upVoteIcon';
      upvoteButtonID = 'upvoteButton';
    } else if (msg['type'] === 'comment') {
      upvoteDivID = 'upvoteTotalComments-' + msg['loc'];
      upvoteIconID = 'commentUpvoteIcon-' + msg['loc'];
      upvoteButtonID = 'commentUpvoteButton-' + msg['loc'];
    }

    document.getElementById(upvoteDivID).innerHTML = msg['totalUpvotes'];
    document.getElementById(upvoteDivID + 'Mobile').innerHTML = msg['totalUpvotes'];

    if (msg['myUpvote'] === 'True') {
      if (document.getElementById(upvoteIconID).classList.contains('far')) {
        document.getElementById(upvoteIconID).classList.remove('far');
        document.getElementById(upvoteIconID).classList.add('fas');
      }
      if (document.getElementById(upvoteButtonID).classList.contains('btn-outline-success')) {
        document.getElementById(upvoteButtonID).classList.remove('btn-outline-success');
        document.getElementById(upvoteButtonID).classList.add('btn-success');
      }
      if (msg['type'] === 'video') {
        if (document.getElementById(upvoteIconID + 'Mobile').classList.contains('far')) {
          document.getElementById(upvoteIconID + 'Mobile').classList.remove('far');
          document.getElementById(upvoteIconID + 'Mobile').classList.add('fas');
        }
        if (document.getElementById(upvoteButtonID + 'Mobile').classList.contains('btn-outline-success')) {
          document.getElementById(upvoteButtonID + 'Mobile').classList.remove('btn-outline-success');
          document.getElementById(upvoteButtonID + 'Mobile').classList.add('btn-success');
        }
      }
    }
    else if (msg['myUpvote'] === 'False') {
      if (document.getElementById(upvoteIconID).classList.contains('fas')) {
        document.getElementById(upvoteIconID).classList.remove('fas');
        document.getElementById(upvoteIconID).classList.add('far');
      }
      if (document.getElementById(upvoteButtonID).classList.contains('btn-success')) {
        document.getElementById(upvoteButtonID).classList.remove('btn-success');
        document.getElementById(upvoteButtonID).classList.add('btn-outline-success');
      }
      if (msg['type'] === 'video') {
        if (document.getElementById(upvoteIconID + 'Mobile').classList.contains('fas')) {
          document.getElementById(upvoteIconID + 'Mobile').classList.remove('fas');
          document.getElementById(upvoteIconID + 'Mobile').classList.add('far');
        }
        if (document.getElementById(upvoteButtonID + 'Mobile').classList.contains('btn-success')) {
          document.getElementById(upvoteButtonID + 'Mobile').classList.remove('btn-success');
          document.getElementById(upvoteButtonID + 'Mobile').classList.add('btn-outline-success');
        }
      }
    }
  });
</script>

<script>
  function changeUpvote(type, id) {
    socket.emit('changeUpvote', { loc: id, vidType: type });
    socket.emit('getUpvoteTotal', { loc: id, vidType: type });
  }
</script>

<script>
  function newScreenShot() {
    player.pause();
    window.whereYouAt = player.currentTime();
    document.getElementById("thumbnailTimestamp").value = window.whereYouAt;
    socket.emit('newScreenShot', { loc: '{{video.id}}', timeStamp: window.whereYouAt });
  }
</script>

<script>
  socket.on('checkScreenShot', function (msg) {
    document.getElementById("newScreenShotImg").src = msg['thumbnailLocation'];
    $("#newSSModal").modal()
  });
</script>


<script>
  function setScreenShot() {
    var timestamp = document.getElementById("thumbnailTimestamp").value;
    socket.emit('setScreenShot', { loc: '{{video.id}}', timeStamp: timestamp });
  }
</script>

{% if startTime != None %}
<script>
  player.currentTime({{startTime}});
  player.play();
</script>
{% endif %}

<script>
  function toggleShareTimestamp() {
    if (document.getElementById('shareTimestamp').checked)
    {
        document.getElementById('embedURLInput').value = '<iframe src="{{request.url}}?embedded=True&autoplay=True&startTime='.replace('?startTime={{startTime}}','') + player.currentTime() + '" width=600 height=345></iframe>';
        document.getElementById('linkShareInput').value = '{{request.url}}'.replace('?startTime={{startTime}}','') + '?startTime=' + player.currentTime();
    } else {
        document.getElementById('embedURLInput').value = '<iframe src="{{request.url}}?embedded=True&autoplay=True" width=600 height=345></iframe>'.replace('?startTime={{startTime}}','');
        document.getElementById('linkShareInput').value = '{{request.url}}'.replace('?startTime={{startTime}}','');
    }
  }
</script>

<script>
    function CopyDiv(divVal) {
      var copyText = document.getElementById(divVal);
      copyText.select();
      document.execCommand("copy");
    }
</script>

{% if video.owningUser == current_user.id %}
<script>
  var clipplayer = videojs('videoClip', { autoplay: false });
</script>

<script>
  function openClipModal() {
    player.pause();

    var startInput = document.getElementById('clipStartTime');
    startInput.value = null;

    var stopInput = document.getElementById('clipStopTime');
    stopInput.value = null;

    var clipDescriptionInput = document.getElementById('clipDescription');
    clipDescriptionInput.value = null;

    $("#clipModal").modal();
  }

  function setClipStart() {
    var startInput = document.getElementById('clipStartTime');
    startInput.value = clipplayer.currentTime()
  }

  function setClipStop() {
    var stopInput = document.getElementById('clipStopTime');
    stopInput.value = clipplayer.currentTime()
  }

</script>

{% endif %}
<script>
function toggleChannelSub(chanID) {
    socket.emit('toggleChannelSubscription', { channelID: chanID });
}
</script>
<script>

socket.on('sendChanSubResults', function (msg) {
    var subButton = document.getElementById('chanSubStateButton');
    if (msg['state'] === true) {
        subButton.innerHTML = "<i class='fas fa-star'></i><span class='d-none d-sm-none d-md-inline'> Unsubscribe</span>";
        subButton.className = "btn btn-sm btn-success";
    } else {
        subButton.innerHTML = "<i class='far fa-star'></i><span class='d-none d-sm-none d-md-inline'> Subscribe</span>";
        subButton.className = "btn btn-sm btn-outline-success";
    }
  });
</script>

{% endblock %}